<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= web_title%></title>
    <link rel="stylesheet" href="/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/layuiadmin/style/admin.css" media="all">
    <link rel="stylesheet" href="/ruoling/css/ruoling-ui.css">
    <link rel="stylesheet" href="/ruoling/css/ruoling-load.css">
    <link rel="stylesheet" href="/libs/animate/animate.css">
</head>
<style>

    /* chrome */
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }
    /* 火狐浏览器 */
    input[type="number"] {
        -moz-appearance: textfield;
    }
    .Yiling-flexd{position: fixed;bottom: 0;background-color: #f0f4f7;width: 100%;border-top: 1px #c7c7c7 solid;text-align: right;}
    .Yiling-padding{padding: 20px 15px;}
    .Yiling-border-blue{border: 1px solid #0064b6;}
    .Yiling-border-block{border: 1px solid #000;}
    .Yiling-Body{background-color: #ffffff;}
    .Yiling-padding-bottom{padding-bottom: 15px;}
    .Yiling-seach{display: inline-block;height: 36px;border: 1px solid #e5e6e7;vertical-align: top;line-height: 36px;width: 36px;text-align: center;margin-left: -6px;border-top-right-radius: 5px;border-bottom-right-radius: 5px;cursor: pointer;}
</style>
<body class="Yiling-Body">
    <form class="layui-form" action="">
        <div style="padding:20px 20px;">
            <div class="Yiling-padding-bottom">
                <label class="layui-form-label" style="width: 190px;">上级菜单：</label>
                <div style="width: 300px;display: inline-block;">
                    <input type="text"  name="sys_parent_id" id="Pidtitle" style="background-color: #f8f8f8;" required  lay-verify="required"  placeholder="请输入主目录" autocomplete="off" class="layui-input">
                </div>
                <div class="Yiling-seach">
                    <i class="layui-icon layui-icon-search"></i>   
                </div>
            </div>
            <div class="Yiling-padding-bottom">
                <label class="layui-form-label" style="width: 190px;">菜单类型：</label>
                <div style="width: 300px;display: inline-block;" id="InputRadio">
                    <input type="radio"  name="sys_menu_type"  lay-filter="levelM" value="M" title="目录" checked>
                    <input type="radio" name="sys_menu_type"  lay-filter="levelM" value="C" title="菜单" >
                    <input type="radio" name="sys_menu_type"  lay-filter="levelM" value="A" title="按钮">
                </div>
            </div>
            <div id="CatalogueMian">
                <div class="Yiling-padding-bottom">
                    <label class="layui-form-label" style="width: 190px;">菜单名称：</label>
                    <div style="width: 300px;display: inline-block;">
                        <input type="text" name="sys_menu_name"  required  lay-verify="required" placeholder="请输入菜单名称" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="Yiling-padding-bottom" id="permisshref"  style="display: none;">
                </div>
                <div class="Yiling-padding-bottom" id="menuicon">
                    <label class="layui-form-label" style="width: 190px;">图标：</label>
                    <div style="width: 300px;display: inline-block;">
                        <input type="text" name="sys_menu_icon"  id="iconInput" placeholder="请添加图标" autocomplete="off" class="layui-input">
                        <iframe id="MenuIframe" class="animated flipInX" style="display:none" src="/admin/system/menu/icon/view" width="100%" height="100%" frameborder="0"></iframe>
                    </div>
                </div>
                <div class="Yiling-padding-bottom">
                    <label class="layui-form-label" style="width: 190px;">显示排序：</label>
                    <div style="width: 300px;display: inline-block;">
                        <input type="number" name="sys_order_num" onmousewheel="return false;"  required  lay-verify="required" placeholder="请输入显示排序" autocomplete="off" class="layui-input">
                    </div>
                </div>

            </div>
        </div>
        <div class="Yiling-flexd">
            <div class="Yiling-padding">
                <button type="button"  lay-submit lay-filter="formDemo"  class="layui-btn layui-btn-sm Yliing-blue Yiling-border-blue">确认</button>
                <button type="button" id="Yiling-close" class="layui-btn layui-btn-sm layui-btn-primary  Yiling-border-block">关闭</button>
            </div>
        </div>
    </form>  
</body>
</html>
<script src="/layuiadmin/layui/layui.js"></script>
<script>
layui.config({
    base:""
}).extend({
    Yiling:"/libs/ruoling-request/js/Yiling-Request"
}).use(["table","layer","jquery","form",'Yiling'],function(){
    let table = layui.table;
    let layer = layui.layer;
    let $ = layui.jquery;
    let form = layui.form;
    let request = layui.Yiling.YI_Ajax;
  
     //填充input框
     window.Loadinput = function (data) {
        let Pidtitle = document.querySelector("#Pidtitle");
        Pidtitle.value = data.title;
        Pidtitle.setAttribute("data-id",data.id)
    };

    //调用方法
    window.LoadTable = function (){
     
    };

    form.on("radio(levelM)",function(obj){
        let dataValue = obj.value;

        let permisshref = document.querySelector("#permisshref");
        let menuicon = document.querySelector("#menuicon");

        let thtml = "";
        //根据判断隐藏dom
        if(dataValue == "M"){

            permisshref.style.display = "none";
            menuicon.style.display = "block";

            thtml = "";

            permisshref.innerHTML = thtml;
        }else if(dataValue == "C"){

            permisshref.style.display = "block";
            menuicon.style.display = "block";

            thtml = "";

            thtml += '<label class="layui-form-label" style="width: 190px;">请求地址：</label><div style="width: 300px;display: inline-block;"><input type="text" name="sys_permission_url"  required  lay-verify="required" placeholder="请输入请求地址" autocomplete="off" class="layui-input"></div>';

            permisshref.innerHTML = thtml;

        }else if(dataValue == "A"){
            permisshref.style.display = "block";
            menuicon.style.display = "none";
            thtml = "";
            thtml += '<label class="layui-form-label" style="width: 190px;">请求地址：</label><div style="width: 300px;display: inline-block;"><input type="text" name="sys_permission_url"  required  lay-verify="required" placeholder="请输入请求地址" autocomplete="off" class="layui-input"></div>';
            permisshref.innerHTML = thtml;

        }
    });

    let iconInput = document.querySelector("#iconInput");
    let MenuIframe = document.getElementById("MenuIframe");
    let menuicon = document.getElementById("menuicon")

    iconInput.addEventListener("focus", function () {
        MenuIframe.style.display = "block";
    });

    document.addEventListener("click", function (e) {
        if (menuicon.contains(e.target) && "iconInput" != e.target.id) {
            MenuIframe.style.display = "none";
        }
    })
    window.IconOn = function (value) {
        let iconInput = document.querySelector("#iconInput");
        iconInput.value = value;
        MenuIframe.style.display = "none";
    }

    //监听提交
    form.on('submit(formDemo)', function(data){
        let info = data.field;
        let Pidtitle = document.querySelector("#Pidtitle");
        info.sys_parent_id = Pidtitle.getAttribute("data-id")

        layer.confirm('是否确认添加', {icon: 3, title:'提示'}, function(index){
            let obj = {
                sys_menu_name:info.sys_menu_name,
                sys_parent_id:info.sys_parent_id,
                sys_menu_type:info.sys_menu_type,
                sys_permission_url:info.sys_permission_url,
                sys_order_num:info.sys_order_num,
                sys_menu_icon:info.sys_menu_icon,
            }
            new request().SetUrl("/admin/v1/api/system/menu/add").SetType("POST").SetDataPara(obj).Alone().Init(function(result){
                    parent.window.LoadTable();
                    ifaremClose();
            });
            layer.close(index);
        });
        return false;
    });

      // 关闭按钮事件
    let Yiling_close = document.querySelector("#Yiling-close");
    Yiling_close.addEventListener("click",function(){
        ifaremClose();
    });

    function ifaremClose(){
         //获取特定iframe层的索引
         let index = parent.layer.getFrameIndex(window.name);  
            parent.layer.close(index);
    };

    let TreeIndex = null;
    $("#Pidtitle").click(function(){
        TreeIndex = parent.layer.open({
                    type:2,
                    content:"/admin/system/menu/tree/view",
                    title:"菜单树选择",
                    maxmin:true,
                    area:["400px","700px"],
                    success:function(){
                    }
        })
    })

})
</script>

<!-- 时间格式化 -->
<script type="text/html" id="SetDateCrete">
    {{FormDate(d.creationtime,"yyyy年MM月dd日 HH:mm:ss")}}
</script>
<script>
    function FormDate(d,str){
        return layui.util.toDateString(d, str)
    }
</script>